<template>
<div class="regForm">
    <i-form ref="formReg" :model="formReg" :rules="ruleCustom" label-position="right"  :label-width="100">
        <Form-item label="手机号" prop="phone">
            <i-input v-model="formReg.phone"></i-input>
        </Form-item>
        <Form-item label="密码" prop="password">
            <i-input type="password" v-model="formReg.password"></i-input>
        </Form-item>
        <Form-item label="重复输入密码" prop="passwdCheck">
            <i-input type="password" v-model="formReg.passwdCheck"></i-input>
        </Form-item>
        <Form-item label="qq" prop="qq">
            <i-input v-model="formReg.qq"></i-input>
        </Form-item>
        <Form-item prop="single">
          <Row type="flex" justify="start" align="middle" class="code-row-bg">
            <Col span="15" pull=1>
                <Checkbox v-model="formReg.single">同意《实锤电报助手免责声明》</Checkbox>
            </Col>
            <Col span="2">
                <Button type="text" @click="handleRender">免责声明</Button>
            </Col>
          </Row>
        </Form-item>
        <Form-item>
            <i-button type="primary" @click="handleSubmit('formReg')">注册</i-button>
            <i-button type="ghost" @click="toLog()">已有账户?登陆</i-button>
        </Form-item>
    </i-form>
</div>
</template>
<script>
    export default {
        data () {
             const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    if (this.formReg.passwdCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formReg.validateField('passwdCheck')
                    }
                    callback()
                }
            }
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.formReg.password) {
                    callback(new Error('两次输入的密码不正确'))
                } else {
                    callback()
                }
            }
            const validateQQ = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('QQ 不能为空'))
                }
                 callback()
            }
            return {
                formReg: {
                    phone: '',
                    password: '',
                    passwdCheck: '',
                    qq: '',
                    single: false
                },
                ruleCustom: {
                    phone: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ],
                    qq: [
                        { validator: validateQQ, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleRender () {
                this.$Modal.info({
                    title: '免责声明',
                    content: `<p>1.请自觉遵守中华人民共和国法律。<br/>
                              2.本软件使用Telegram官方应用API接口整合制作，是一个Telegram客户端助手，仅为Telegram提供更方便的使用方式。<br/>
                              3.用户使用软件的方法和用途仅表明其个人的立场和观点，并不代表实锤电报助手的立场或观点。<br/>
                              4.作为软件的使用者，需自行对操作行为及在Telegram内发布的内容负责，因所发表内容引发的一切纠纷，由该内容的发表者承担全部法律及连带责任。实锤电报助手不承担任何法律及连带责任。<br/>
                              5.实锤电报助手不保证网络服务一定能满足用户的要求，也不保证网络服务不会中断，对网络服务的及时性、安全性、准确性也都不作保证。<br/>
                              6.严禁用于非法途径,任何法律责任自行承担。<br/>
                              7.严禁使用本软件刷虚拟币空投业务，任何法律责任自行承担。</p>`
                })
            },
            handleSubmit (name) {
                if (!this.formReg.single) {
                    this.$Message.error('请阅读声明，并同意!')
                    return
                }
                let that = this
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$axios.post('api/userLogin/toReg', this.formReg
                        ).then(function (response) {
                            that.$Message.info(`${response.data.msg}`)
                        })
                    }
                })
            },
            toLog () {
                this.$router.push('/login')
            }
        }
    }
</script>
<style lang="scss" scoped>
.regForm{
    margin: 2rem;
    width: 25rem;
    .code-row-bg{
        width: 20rem;
    }
}
</style>
